<template>
  <view>
    <u-sticky :enable="enable">
      <view class="screen">
        <view class="topBgc">
          <view class="search">
            <input
              type="text"
              placeholder="请输入机具号进行搜索"
              v-model="key_words"
            />
            <view class="btnSearch" @click="searchTab">搜 索</view>
          </view>
          <view class="Machine flex align-center justify-between"
            ><text>{{ title }}</text
            ><text>{{ number }}台</text></view
          >
        </view>
      </view>
    </u-sticky>

    <view class="home">
      <view v-if="machineList.length > 0">
        <view
          class="home-item"
          v-for="(item, index) in machineList"
          :key="index"
        >
          <view class="home-item-number">{{ item.number }}</view>
          <view class="home-item-active_time">
            <view>
              <view
                style="padding-top: 6rpx"
                v-if="item.active_status == 2 ? true : false"
              >
                激活时间：{{
                  $u.timeFormat(item.active_time, "yyyy-mm-dd hh:MM:ss")
                }}</view
              >
              <view
                >入库时间：{{
                  $u.timeFormat(item.create_time, "yyyy-mm-dd hh:MM:ss")
                }}</view
              >
              <view v-if="item.active_status == 2 ? true : false"
                >商户名称：{{ item.mercNm }}</view
              >
            </view>
            <view></view>
            <view class="status" style="color: #e54d42">
              <icon
                class="cuIcon-roundclosefill"
                style="font-size: 36rpx; margin-right: 10rpx"
                type=""
              ></icon>
              <text>未激活</text>
            </view>
          </view>
        </view>
      </view>
    </view>
    <view
      class="noMachine flex align-center"
      v-if="machineList.length == 0 && isLoad"
    >
      <image src="../../static/images/noData/zwsy.png" mode="widthFix"></image>
      <text>暂无机具</text>
    </view>
    <u-loadmore
      :status="status"
      @loadmore="loadmore"
      style="padding: 20rpx 0 40rpx"
      v-if="machineList.length > 0"
    />
    <u-back-top :scroll-top="scrollTop"></u-back-top>
    <toast></toast>
    <!-- 机具政策设置 -->
    <view style="height: 140rpx"></view>
    <view class="terminalZcModify solid-top">
      <u-button
        :ripple="true"
        class="rButton"
        @tap="$u.route('/pages/zdzc/zdzc1')"
        >机具政策设置</u-button
      >
    </view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      enable: true,
      scrollTop: 0,
      currentType: "",
      title: "",
      number: "",
      product_id: "",
      page: 1,
      pageNumber: 10,
      key_words: "",
      machineList: [],
      noMore: false,
      status: "loadmore",
      scrollTop: 0,
      isLoad: false,
    };
  },
  onLoad(options) {
    let currentType = options.tabCurent;
    this.currentType = currentType;
    this.product_id = options.id;
    this.title = options.name;
    this.number = options.count;
    if (currentType == 0) {
      this.getmachineList();
    } else if (currentType == 1) {
      this.teamStockToMachine();
    }
  },
  onShow() {
    this.enable = true;
  },
  onHide() {
    this.enable = false;
  },
  onPageScroll(e) {
    this.scrollTop = e.scrollTop;
  },
  methods: {
    teamStockToMachine() {
      this.$u.api
        .teamStockToMachine({
          cur_page: this.page,
          key_words: this.key_words,
          pageNumber: this.pageNumber,
          product_id: this.product_id,
        })
        .then((res) => {
          if (res.status == 200) {
            var datas = res.result.list;
            if (this.page == 1 && datas.length == 0) {
              this.noMore == true;
              this.status = "nomore";
            }
            if (this.page == 1 && datas.length < this.pageNumber) {
              this.noMore == true;
              this.status = "nomore";
            }
            if (this.page > 1 && datas.length < this.pageNumber) {
              this.noMore == true;
              this.status = "nomore";
            }
            if (this.page > 1 && datas.length == this.pageNumber) {
              this.status = "loading";
            }
            this.machineList = this.machineList.concat(datas);
          }
          this.isLoad = true;
          uni.stopPullDownRefresh();
        })
		.catch((res) => {
			if (res.errMsg == "request:fail timeout") {
				this.$u.toast("请求超时，请重试!");
			} else if (res.errMsg == "request:fail") {
				this.$u.toast("请求失败，请重试");
			} else {
				 this.$u.toast("请求失败，请重试");
			}
			this.$loading(false);
			setTimeout(() => {
				this.$u.route({
					type: "navigateBack",
					delta: 1,
				});
			}, 2000);
		});
    },
    getmachineList() {
      this.$u.api
        .stockToMachine({
          cur_page: this.page,
          key_words: this.key_words,
          pageNumber: this.pageNumber,
          product_id: this.product_id,
        })
        .then((res) => {
          if (res.status == 200) {
            var datas = res.result.list;
            if (this.page == 1 && datas.length == 0) {
              this.noMore == true;
              this.status = "nomore";
            }
            if (this.page == 1 && datas.length < this.pageNumber) {
              this.noMore == true;
              this.status = "nomore";
            }
            if (this.page > 1 && datas.length < this.pageNumber) {
              this.noMore == true;
              this.status = "nomore";
            }
            if (this.page > 1 && datas.length == this.pageNumber) {
              this.status = "loading";
            }
            this.machineList = this.machineList.concat(datas);
          }
          this.isLoad = true;
          uni.stopPullDownRefresh();
        })
		.catch((res) => {
			if (res.errMsg == "request:fail timeout") {
				this.$u.toast("请求超时，请重试!");
			} else if (res.errMsg == "request:fail") {
				this.$u.toast("请求失败，请重试");
			} else {
				 this.$u.toast("请求失败，请重试");
			}
			this.$loading(false);
			setTimeout(() => {
				this.$u.route({
					type: "navigateBack",
					delta: 1,
				});
			}, 2000);
		});
    },

    searchTab() {
      this.page = 1;
      this.key_words = this.$u.trim(this.key_words, "all");
      this.machineList = [];
      this.searchMachineList();
    },

    searchMachineList() {
      this.isLoad = false;
      
      this.$u.api
        .stockToMachine({
          
          active_status: this.acStatus,
          cur_page: this.page,
          key_words: this.key_words,
          pageNumber: 10,
          product_id: this.product_id,
        })
        .then((res) => {
          if (res.status == 200) {
            var datas = res.result.list;
            this.machineList = datas;
          }
          this.isLoad = true;
        })
		.catch((res) => {
			if (res.errMsg == "request:fail timeout") {
				this.$u.toast("请求超时，请重试!");
			} else if (res.errMsg == "request:fail") {
				this.$u.toast("请求失败，请重试");
			} else {
				 this.$u.toast("请求失败，请重试");
			}
			this.$loading(false);
			setTimeout(() => {
				this.$u.route({
					type: "navigateBack",
					delta: 1,
				});
			}, 2000);
		});
    },

    // 查询台数
    getTotal(num) {
      
      this.$u.api
        .stockToMachine({
          
          active_status: num,
          cur_page: 1,
          pageNumber: 10,
          product_id: this.product_id,
        })
        .then((res) => {
          if (res.status == 200) {
            if (num == 1) {
              this.unActive = res.result.total;
            } else {
              this.active = res.result.total;
            }
          }
        })
		.catch((res) => {
			if (res.errMsg == "request:fail timeout") {
				this.$u.toast("请求超时，请重试!");
			} else if (res.errMsg == "request:fail") {
				this.$u.toast("请求失败，请重试");
			} else {
				 this.$u.toast("请求失败，请重试");
			}
			this.$loading(false);
			setTimeout(() => {
				this.$u.route({
					type: "navigateBack",
					delta: 1,
				});
			}, 2000);
		});
    },

    // 查询已激活
    isActiveTab(e) {
      this.chooseStatus = e.currentTarget.dataset.chooseStatus;
      this.acStatus = 2;
      this.page = 1;
      this.key_words = "";
      this.machineList = [];
      this.status = "loadmore";
      uni.pageScrollTo({
        scrollTop: 0,
        duration: 100,
      });
      this.getmachineList();
    },

    // 查询未激活
    notActiveTab(e) {
      this.chooseStatus = e.currentTarget.dataset.chooseStatus;
      this.acStatus = 1;
      this.page = 1;
      this.key_words = "";
      this.machineList = [];
      this.status = "loadmore";
      uni.pageScrollTo({
        scrollTop: 0,
        duration: 100,
      });
      this.getmachineList();
    },

    // 点击下载更多
    loadmore() {
      if (this.noMore) {
        this.status = "nomore";
      } else {
        this.page = ++this.page;
        this.status = "loadmore";
        if (this.currentType == 0) {
          this.getmachineList();
        } else if (this.currentType == 1) {
          this.teamStockToMachine();
        }
      }
    },
    // 下拉触底
    onReachBottom() {
      if (this.noMore) {
        this.status = "nomore";
      } else {
        this.status = "loading";
        this.page = ++this.page;
        if (this.currentType == 0) {
          this.getmachineList();
        } else if (this.currentType == 1) {
          this.teamStockToMachine();
        }
      }
    },
    onPullDownRefresh() {
      this.machineList = [];
      this.page = 1;
      this.key_words = "";
      this.noMore = false;
      this.isLoad = false;
      this.status = "loadmore";
      if (this.currentType == 0) {
        this.getmachineList();
      } else if (this.currentType == 1) {
        this.teamStockToMachine();
      }
    },
    onPageScroll(e) {
      this.scrollTop = e.scrollTop;
    },
  },
};
</script>

<style lang="scss" scoped>
.screen {
  width: 100%;
  line-height: 80rpx;
  background-color: #f1f1f1;
}

.topBgc {
  padding: 0 20rpx;
  position: relative;
  font-family: din;
  width: 100%;
  background-image: linear-gradient(to top, #fc6306 0%, #fb4535 100%);
  box-shadow: 0 1rpx 3rpx #dddddd;
  .Machine {
    font-size: 34rpx;
    color: white;
    letter-spacing: 3rpx;
    line-height: 100rpx;
  }
  .search {
    position: relative;
    border-radius: 10rpx;
    padding: 0 30rpx;
    height: 60rpx;
    width: 100%;
    background-color: #fff;
    input {
      height: 60rpx;
      line-height: 60rpx;
      font-size: 28rpx;
    }
  }
}

.leftPart,
.rightPart {
  position: relative;
  width: 48%;
  background-color: #fff;
  height: 120rpx;
  border-radius: 20rpx;
  margin-top: 88rpx;
  box-shadow: 5rpx 8rpx 14rpx rgb(228, 228, 228);
}

.leftPart > view,
.rightPart > view {
  color: #999;
  padding-left: 60rpx;
  height: 50rpx;
}

.leftPart > view::before,
.rightPart > view::before {
  content: "";
  display: block;
  width: 8rpx;
  height: 30rpx;
  background-color: #fdc991;
  position: absolute;
  left: 30rpx;
  top: 24rpx;
}

.btnSearch {
  position: absolute;
  right: 10rpx;
  top: 10rpx;
  width: 100rpx;
  text-align: center;
  color: #777;
  line-height: 20px;
  height: 40rpx;
  z-index: 99;
  border-left: solid 1rpx #bbb;
}

.bottomPart text {
  font-weight: 700;
  font-size: 32rpx;
}

.bottomPart image {
  width: 48rpx;
  position: absolute;
  right: 24rpx;
  top: 40rpx;
}

.home {
  padding: 20rpx 20rpx 0;
}

.home-item {
  position: relative;
  padding: 20rpx;
  border-radius: 15rpx;
  box-shadow: 0 0 6rpx #ccc;
  margin-bottom: 20rpx;
  background-color: #fff;
}

.home-item-type {
  top: 0;
  right: 5%;
  position: absolute;
  font-size: 60rpx;
  color: rgba(0, 128, 255, 0.2);
  font-style: italic;
  font-weight: bolder;
}

.home-item-number {
  position: relative;
  font-family: "din-font";
  font-weight: bold;
  color: #010101;
  font-size: 40rpx;
}

.home-item-active_time {
  margin-top: 10rpx;
  display: flex;
  justify-content: space-between;
  align-items: center;
  position: relative;
  font-size: 26rpx;
  color: #8799a3;
}

.status {
  display: flex;
  align-items: center;
}

.allocationPart {
  position: fixed;
  bottom: 0;
  right: 0;
  width: 100%;
  z-index: 99;

  & > button {
    background-color: #fb4535;
    border-radius: 0;
  }
}
.terminalZcModify {
  padding: 30rpx;
  position: fixed;
  left: 0;
  bottom: 0;
  width: 100%;
  box-sizing: border-box;
  background: #fff;
  z-index: 999;
  .rButton {
    background: #fb4535;
    color: #fff;
  }
}
</style>
